<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref } from "vue";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete,
		genderOptions,
		statusOptions,
		isSuperAdminOptions,
		handleResetPwd,
		userSelection
	} = useCorps();
	const formRef = ref();
	
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<!-- <el-form-item label="部门ID:">
				<el-input v-model="form.departmentId" class="!w-[180px]" clearable placeholder="部门ID" />
			</el-form-item> -->
			<el-form-item label="用户名:">
				<el-input v-model="form.username" class="!w-[180px]" clearable placeholder="用户名" />
				<!-- <el-select
				  v-model="form.username"
				  placeholder="请选择用户名"
				   class="!w-[180px]"
				  clearable
				>
				  <el-option
				    v-for="(item, index) in userSelection"
				    :key="index"
				    :label="item.username"
				    :value="item.username"
				  />
				</el-select> -->
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="form.name" class="!w-[180px]" clearable placeholder="姓名" />
			</el-form-item>
			<!-- <el-form-item label="入职时间:">
				<el-date-picker
					v-model="form.entryDate"
					type="datetime"
					placeholder="请选择入职时间"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
					 class="!w-[180px]"
				/>
			</el-form-item> -->
			<el-form-item label="电话:">
				<el-input v-model="form.phone" class="!w-[180px]" clearable placeholder="电话" />
			</el-form-item>
			<!-- <el-form-item label="职位ID:">
				<el-input v-model="form.jobTitleId" class="!w-[180px]" clearable placeholder="职位ID" />
			</el-form-item> -->
			<!-- <el-form-item label="性别" prop="gender">
			  <el-select
			    v-model="form.gender"
			    placeholder="请选择性别"
			     class="!w-[180px]"
			    clearable
			  >
			    <el-option
			      v-for="(item, index) in genderOptions"
			      :key="index"
			      :label="item.name"
			      :value="item.id"
			    />
			  </el-select>
			</el-form-item> -->
			<!-- <el-form-item label="状态" prop="status">
			  <el-select
			    v-model="form.status"
			    placeholder="请选择状态"
			     class="!w-[180px]"
			    clearable
			  >
			    <el-option
			      v-for="(item, index) in statusOptions"
			      :key="index"
			      :label="item.name"
			      :value="item.id"
			    />
			  </el-select>
			</el-form-item> -->
			<!-- <el-form-item label="超级管理员" prop="isSuperAdmin">
			  <el-select
			    v-model="form.isSuperAdmin"
			    placeholder="请选择是否为超级管理员"
			     class="!w-[180px]"
			    clearable
			  >
			    <el-option
			      v-for="(item, index) in isSuperAdminOptions"
			      :key="index"
			      :label="item.name"
			      :value="item.id"
			    />
			  </el-select>
			</el-form-item> -->
			
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="用户管理" :columns="columns"
				@refresh="onSearch">
				<template #buttons>
					<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
						添加信息
					</el-button>
				</template>
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{background: 'var(--el-fill-color-light)',
						color: 'var(--el-text-color-primary)'}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
						<template #operation="{ row }">
							<!-- <el-popconfirm v-if="row.status === 0" :title="`是否审核通过?`" confirm-button-text="通过"
								cancel-button-text="拒绝" cancel-button-type="danger">
								<template #reference>
									<el-button class="reset-margin" link type="primary" :size="size">
										审核
									</el-button>
								</template>
							</el-popconfirm> -->
							<el-button class="reset-margin" link type="primary" :size="size"
								@click="openDialog('修改', row)">
								修改
							</el-button>
							<el-popconfirm :title="`是否确认删除?`" @confirm="handleDelete(row)">
								<template #reference>
									<el-button class="reset-margin" link type="primary" :size="size">
										删除
									</el-button>
								</template>
							</el-popconfirm>
							<el-button class="reset-margin" link type="primary" :size="size"
								@click="handleResetPwd(row)">
								重置密码
							</el-button>
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}
</style>